<template>
	<div>
			<div class="flex-row justify-between" style="margin-bottom: 12px;">
				<div>
					<el-input v-model="inputCD" placeholder="请输入小料名称" style="width: 200px;"></el-input>
					 <el-button icon="el-icon-search" circle style="margin-left: 10px;" @click="CX()"></el-button>
				</div>
	        <el-button type="success" @click="AddVisible=true">添加</el-button>
			</div>
	 <el-table
	  v-loading="loading"
	    :data="tableData"
	    border>
	    <el-table-column
	      fixed
	      prop="Id"
	      label="Id"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="MatName"
	      label="小料名"
	     >
	    </el-table-column>
	    <el-table-column
	      prop="Price"
	      label="价格"
	     >
	    </el-table-column>
	    <el-table-column
	      fixed="right"
	      label="操作">
	      <template slot-scope="scope">
	        <el-button type="text" size="small" @click="Update(scope.row.Id)">修改</el-button>
			<el-popconfirm
			  confirm-button-text='确定'
			  cancel-button-text='取消'
			  icon="el-icon-info"
			  icon-color="red"
			  title="确定删除吗？"
			  @confirm="Delete(scope.row.Id)"
			>
			  <el-button type="text" slot="reference" size="small" style="margin-left: 10px;">删除</el-button>
			  </el-popconfirm>
			  
	      </template>
	    </el-table-column>
	  </el-table>
	  
	  
	  <el-dialog title="添加菜单" :visible.sync="AddVisible" :width="dialogWidth">
		<mate-add @CloseAdd="CloseAdd"></mate-add>
	  </el-dialog>
	  
	  <el-dialog title="修改菜单" :visible.sync="UpdateVisible" :width="dialogWidth">
		<mate-upd @CloseUpd="CloseUpd" :id="id" v-if="UpdateVisible"></mate-upd>
	  </el-dialog>
	
	<div class="block">
	      <el-pagination
	
	        @current-change="handleCurrentChange"
	        :current-page="query.PageIndex"
	        :page-size="query.PageSize"
	        layout="total, prev, pager, next, jumper"
	        :total="total">
	      </el-pagination>
	    </div>
	
	  </div>
	  
	   
</template>

<script>
	import mateapi from '@/api/MaterialApi'
	// import mateAdd from './MaterialAdd.vue'
	// import mateUpd from './MaterialUpdate.vue'
	export default {
	  methods: {
		  handleClick(row) {
		  
		  }
	  },
	 data() {
	   return {
	 	  id:0,
	     tableData: [{
	    }],
	    query:{
	 	   PageIndex:1,PageSize:5
	    },
	    total:0,
	    loading:true,
	    AddVisible:false,
	    UpdateVisible:false,
	    inputCD:"",
	    dialogWidth:'500px',
	    }
		
		  
	  },
	  components:{
	  	mateAdd,
		mateUpd
	  	
	  },
	  created(){
	  	this.getdata();
	  },
	  methods:{
	  	getdata(){
	  		mateapi.Query(this.query).then(res=>{
	  			this.tableData=res.data.data;
	  			this.total = res.data.total
	  			this.loading = false;
	  		})
	  		
	  	},
	  	handleCurrentChange(pageIndex){
	  		this.query.PageIndex = pageIndex
	  			this.getdata()
	  	},
	  	
	  	CX(){
	  		mateapi.Query({MatName:this.inputCD,PageIndex:1,PageSize:10}).then(res=>{
	  			this.tableData=res.data.data;
	  			this.loading = false;
	  		})
	  		
	  	},
	  	Update(id){
	  		this.id=id;
	  		this.UpdateVisible=true;
	  	},
	       Delete(id){
			   
	  		 mateapi.Delete(id).then(res=>{
	  			const h = this.$createElement;
	  			 this.$notify({
	  			          title: '成功',
	  			                    message: '删除成功',
	  			                    type: 'success',
	  								showClose: false
	  			        });
	  			 this.getdata();
	  		 })
	  		 
	  	 },
	  	CloseAdd(){
	  		this.AddVisible=false;
	  		this.getdata();
	  	},
	  	CloseUpd(){
	  		this.UpdateVisible=false;
	  		this.getdata();
	  	}
	  }
	  }
</script>

<style>
</style>